<template>
	<view class="container">
		<up-form labelPosition="left" ref="form">
			<up-form-item label="评分" borderBottom>
				<up-rate :count="5" v-model="formData.marks"></up-rate>
			</up-form-item>
			<up-form-item label="评价内容" borderBottom>
				<up-textarea v-model="formData.content" placeholder="请输入评价内容" count></up-textarea>
			</up-form-item>
			<up-form-item label="图片">
				<up-upload :fileList="imagesList" @afterRead="afterRead" @delete="deletePic" name="2" multiple
					:maxCount="10" accept="all"></up-upload>
			</up-form-item>

		</up-form>
		<view class="tagbox">
			<view class="tag_item" @click="checkboxClick(index)" :class="item.checked ? 'tag_checked':''"
				v-for="(item, index) in checkboxs" :key="index">
				{{item.lable}}
			</view>
		</view>


	</view>
	<view class="btnSty">

		<up-button type="success" :loading="loading" color="linear-gradient(to right, rgb(216, 0, 0), rgb(213, 90, 2))"
			text="提交" @click="save"></up-button>
	</view>
</template>

<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import basUrl from "@/config/config.js"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		evaluateApi,
		evaluateMarkApi
	} from '@/api/service'
	import {
		Upload
	} from "@/utils/upload.js"
	export default {
		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				formData: {
					content: '',
					images: [],
					marks: 5,
					serverId: null,
					uid: null,
				},
				checkboxs: [{
						lable: '服务热情 ',
						checked: false
					},
					{
						lable: '非常专业 ',
						checked: false
					},
					{
						lable: '性价比高',
						checked: false
					},
					{
						lable: '价格',
						checked: false
					},
					{
						lable: '准时',
						checked: false
					},
					{
						lable: '其他',
						checked: false
					}
				],
				loading: false,
				imagesList: [],
			})

			onLoad((option) => {
				state.formData.serverId = Number(option.serviceId)
				state.formData.uid = Number(option.uid)
			})

			// 删除图片
			const deletePic = (event) => {
				state.imagesList.splice(event.index, 1);
			};

			// 新增图片
			const afterRead = async (event) => {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(lists)
				let fileListLen = state.imagesList.length;
				lists.map((item) => {
					state.imagesList.push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await Upload(lists[i].url);
					let item = state.imagesList[fileListLen];
					state.imagesList.splice(fileListLen, 1, {
						...item,
						status: 'success',
						message: '',
						url: basUrl.baseURL + result,
						imgUrl: result,
					});
					fileListLen++;
				}
			};

			const save = async () => {
				state.loading = true
				let tag=[]
				let objData={...state.formData}
				if (state.imagesList.length > 0) {
					let arr = state.imagesList.map((item) => item.imgUrl)

					objData.images = JSON.stringify(arr)
				}else{
					objData.images = JSON.stringify(objData.images)
				}
				if(state.checkboxs.length>0){
					tag = state.checkboxs.map((item)=>{
						if(item.checked){
							return item.lable
						}
					})
				}
				

				try {
					await evaluateApi(objData)
					if(tag.length>0){
						await evaluateMarkApi({
							aimUid: state.formData.serverId,
							marks: JOSN.stringify(tag)
						})
					}
					
					uni.$u.toast("评论成功");
					uni.reLaunch({
						url: '/pages/order/index'
					})

					state.loading = false
				} catch {
					state.loading = false
				}


			}

			const checkboxClick = (name) => {
				state.checkboxs[name].checked = !state.checkboxs[name].checked;
			};


			return {
				...toRefs(state),
				afterRead,
				checkboxClick,
				deletePic,
				save,
			}

		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #fff;
		padding: 20rpx;
	}

	.tagbox {
		margin-right: 20px;
		display: flex;
		flex-wrap: wrap;

		.tag_item {
			margin-bottom: 20rpx;
			min-width: 200rpx;
			margin-right: 20rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			color: #ee6516;
			border: 1px solid #ee6516;
		}

		.tag_checked {
			color: #fff;
			background: #ee6516;

		}
	}

	.btnSty {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;


		background: #fff;
		padding: 20rpx 20rpx 0 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));

		button {
			background-color: #06C04F;
			width: 100%;
			height: 100rpx;
			color: white;
			font-size: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>